<template>
<div class="orderbox">
  <div class="header">
    <mt-header class="mt-header" title="提交订单">
        <router-link to="/" slot="left">
          <mt-button class="iconfont icon-jiantou3"></mt-button>
        </router-link>
      </mt-header>
  </div>
  <div class="order-content">
    <!-- 地址部分开始 -->
    <div class="address">
        <div class="address-top">
            <span class="iconfont icon-iconfontzhizuobiaozhun023117"></span>
            <p>姓名</p>
            <strong>18738135355</strong>
        </div>
        <div class="address-center">
            <router-link to="./address" tag="span" class="iconfont icon-arrow"></router-link>
        </div>
        <div class="address-bottom">
            河南省郑州市新郑市人民路168号
        </div>
    </div>
    <!-- 地址部分结束 -->
    <!-- 确认订单部分开始 -->
    <div class="firm-order">
        <div class="firm-top">
            <span class="iconfont icon-querenhetongquerenhetongqueding"></span>
            <p>确认订单信息</p>
            <i>请仔细核对本页信息</i>
        </div>
    <!-- 确认订单部分结束 -->
    <!-- 订单商品列表开始 -->
    <ul class="cart-list">
        <!-- 第一件商品 -->
      <li>
        <div class="cartlist-center">
          <span class="list-image"><img src="https://img.alicdn.com/imgextra/i4/3527212490/O1CN01p7T9xM1UGSgjgy9S9_!!3527212490.jpg_430x430q90.jpg" alt=""></span>
          <div class="list-dec">
            <div class="dec-name">阿玛尼樱花粉气垫</div>
            <div class="dec-color">型号：5号 樱花粉</div>
            <div class="dec-num">
              <span class="iconfont icon-jianhao"></span>
              <p>1</p>
              <span class="iconfont icon-iconfonticon02"></span>
            </div>
          </div>
        </div>
        <div class="cartlist-right">￥366.00</div>
      </li>
      <!-- 第二件商品 -->
      <li>
        <div class="cartlist-center">
          <span class="list-image"><img src="https://img.alicdn.com/imgextra/i4/2107975731/TB2ds5FfLNNTKJjSspcXXb4KVXa_!!2107975731.jpg_430x430q90.jpg" alt=""></span>
          <div class="list-dec">
            <div class="dec-name">DW手表女 简约时尚女表</div>
            <div class="dec-color">颜色：香槟色</div>
            <div class="dec-num">
              <span class="iconfont icon-jianhao"></span>
              <p>1</p>
              <span class="iconfont icon-iconfonticon02"></span>
            </div>
          </div>
        </div>
        <div class="cartlist-right">￥1299.00</div>
      </li>
      <!-- 第三件商品 -->
      <li>
        <div class="cartlist-center">
          <span class="list-image"><img src="https://img.alicdn.com/imgextra/i2/2010197355/O1CN01gKkDU524CdXafEZej_!!2010197355.png_430x430q90.jpg" alt=""></span>
          <div class="list-dec">
            <div class="dec-name">Hermes/爱马仕2018新款</div>
            <div class="dec-color">颜色：黑色</div>
            <div class="dec-num">
              <span class="iconfont icon-jianhao"></span>
              <p>1</p>
              <span class="iconfont icon-iconfonticon02"></span>
            </div>
          </div>
        </div>
        <div class="cartlist-right">￥192950.00</div>
      </li>
    </ul>
    <!-- 订单商品列表结束-->
    </div>
    <!-- 支付方式开始 -->
    <div class="paybox">
        <span class="iconfont icon-wodedaifukuan"></span>
        <p>支付方式</p>
        <i class="iconfont icon-iconfonticon02"></i>
    </div>
    <!-- 支付方式结束 -->
    <!-- 商品合计开始 -->
    <div class="pro-total">
      <p>商品合计</p>
      <span>￥666</span>
    </div>
    <!-- 商品合计结束 -->
    <!-- 运费开始 -->
    <div class="carrymoney">
      <p>运费</p>
      <span>￥10</span>
    </div>
    <!-- 运费结束 -->
    </div>
    <div class="orderbox-footer">
        <div class="footer-left">合计：<span>￥203082</span></div>
        <div class="footer-right">
            <router-link to='./payment' tag="button" class="btn">提交订单</router-link>
        </div>
    </div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.orderbox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column
}
.mt-header {
  width: 100%;
  height: 0.44rem;
  background: #ea9c9a;
  flex-shrink: 0
}
.order-content {
    width: 100%;
    height: auto;
    flex-shrink: 1;
    overflow: auto;
.address {
    width: 100%;
    height: 0.8rem;
    background: #fff;
    padding: 0 0.1rem;
    .address-top {
        width: 100%;
        height: 0.3rem;
        .iconfont {
            display: block;
            width: 0.2rem;
            height: 0.3rem;
            line-height: 0.3rem;
            font-size: 0.16rem;
            float: left;
        }
        p {
            width: 0.4rem;
            height: 0.3rem;
            line-height: 0.3rem;
            float: left;
            text-align: center

        }
        strong {
            display: block;
            width: 2rem;
            height: 0.3rem;
            line-height: 0.3rem;
            float: right;
        }
    }
    .address-center {
        width: 100%;
        height: 0.2rem;
        font-size: 0.14rem;
        line-height: 0.2rem;
        text-align: right;
        color: #ccc;
    }
    .address-bottom {
        width: 100%;
        height: 0.3rem;
        font-size: 0.14rem;
        line-height: 0.1rem;
    }
}
.firm-order {
    width: 100%;
    height: auto;
    margin-top: 0.09rem;
    padding: 0.1rem;
    .firm-top {
        width: 100%;
        height: 0.3rem;
        .iconfont {
            display: block;
            width: 0.3rem;
            height: 0.3rem;
            line-height: 0.3rem;
            float: left;
        }
        p {
            width: 1.2rem;
            height: 0.3rem;
            float: left;
            font-size: 0.14rem;
            line-height: 0.3rem;
        }
        i {
            display: block;
            width: 1.5rem;
            height: 0.3rem;
            line-height: 0.3rem;
            color: #f00;
            float: right
        }

    }
// 订单列表开始
.cart-list {
  width: 100%;
  height: auto;
  li {
    width: 100%;
    height: 1.2rem;
    border-bottom: 0.01rem solid #ccc;
    padding: 0.1rem;
    position: relative;
    .cartlist-center {
      width: 2.8rem;
      height: 1rem;
      margin-left: 0.2rem;
      float: left;
      display: flex;

      .list-image {
        display: block;
        width: 0.7rem;
        height: 0.7rem;
        margin-top: 0.15rem;
        float: left;
        img {
          @include rect(0.7rem, 0.7rem)
        }
      }
      .list-dec {
        width: 2rem;
        height: 0.8rem;
        float: left;
        display: flex;
        margin-top: 0.1rem;
        margin-left: 0.1rem;
        flex-direction: column;
        justify-content: space-around;
        .dec-name {
          width: 2rem;
          height: 0.3rem;
          font-size: 0.16rem;
          line-height: 0.3rem;
        }
        .dec-color {
          width: 2rem;
          height: 0.2rem;
          line-height: 0.2rem;
          font-size: 0.14rem;
          color: #101010;
        }
        .dec-num {
          width: 0.8rem;
          height: 0.2rem;
          line-height: 0.2rem;
          border: 0.01rem solid #ccc;
          display: flex;
          justify-content: center;
          align-items: center;
          .iconfont {
            display: block;
            width: 0.25rem;
            height: 0.2rem;
            line-height: 0.2rem;
            text-align: center;
          }
          p {
            width: 0.3rem;
            height: 0.2rem;
            line-height: 0.2rem;
            text-align: center;
            border-right: 0.01rem solid #ccc
          }
        }
      }
    }
    .cartlist-right {
      width: 0.35rem;
      height: 1rem;
      float: right;
      line-height: 1.6rem;
      position: absolute;
      top:0;
      right:0.5rem
    }
  }
}
}
// 支付方式部分
.paybox {
    width: 100%;
    height: 0.5rem;
    background: #eee;
    margin-top: 0.1rem;
    .iconfont {
            display: block;
            width: 0.3rem;
            height: 0.5rem;
            line-height: 0.5rem;
            float: left;
        }
        p {
            width: 1.2rem;
            height: 0.5rem;
            float: left;
            font-size: 0.14rem;
            line-height: 0.5rem;
        }
        i {
            display: block;
            width: 0.5rem;
            height: 0.3rem;
            font-size: 0.4rem;
            line-height: 0.3rem;
            float: right;
            margin-left: 1.8rem
        }
}
// 商品合计开始
.pro-total {
  width: 100%;
  height: 0.4rem;
  border-bottom: 0.01rem solid #ccc;
  padding: 0.1rem;
  background: #eee;
  margin-top: 0.1rem;
  p {
    width: 2rem;
    height: 0.2rem;
    line-height: 0.2rem;
    font-size: 0.16rem;
    float: left;
  }
  span {
    display: block;
    width: 0.4rem;
    height: 0.2rem;
    line-height: 0.2rem;
    float: right
  }
}
// 商品合计结束
// 运费开始
.carrymoney {
  width: 100%;
  height: 0.5rem;
  padding: 0.1rem;
  line-height: 0.5rem;
  p {
    width: 2rem;
    height: 0.3rem;
    line-height: 0.3rem;
    font-size: 0.16rem;
    float: left;
  }
  span {
    display: block;
    width: 0.5rem;
    height: 0.3rem;
    line-height: 0.3rem;
    float: right
  }

}
}
.orderbox-footer {
    width: 100%;
    height: 0.5rem;
    background: #fff;
    border-top: 0.01rem solid #ccc;
    flex-shrink: 0;
    padding: 0 0.1rem;
    .footer-left {
        width: 1rem;
        height: 0.5rem;
        line-height: 0.5rem;
        font-size: 0.14rem;
        float: left;
    }
    .footer-right {
        width: 0.8rem;
        height: 0.5rem;
        float: right;
        .btn {
            width: 0.95rem;
            height: 0.5rem;
            border: 0rem;
            background: #000;
            font-size: 0.16rem;
            color: #fff
        }
    }
}
</style>
